<template>
  <div>
    <el-button size="mini" type="primary" @click="addPerson">{{
      customer.addContacts
    }}</el-button>
    <el-table
      ref="customerPersonData"
      :data="customerPersonData"
      element-loading-text="Loading"
      fit
      highlight-current-row
    >
      <el-table-column prop="customerPersonName" :label="customer.name">
      </el-table-column>
      <el-table-column prop="mobilePhone" :label="customer.mobilePhone">
      </el-table-column>
      <el-table-column prop="fixedPhone" :label="customer.fixedPhone">
      </el-table-column>
      <el-table-column prop="email" :label="customer.email"> </el-table-column>
      <el-table-column prop="post" :label="customer.post"> </el-table-column>
      <el-table-column prop="primaryContact" :label="customer.primaryContact">
        <template slot-scope="scope">{{
          scope.row.primaryContact == 1 ? customer.yes : customer.no
        }}</template>
      </el-table-column>
      <el-table-column :label="operateType.action" width="150">
        <template slot-scope="scope">
          <el-link
            type="primary"
            @click="handleUpdate(scope.$index, scope.row)"
            >{{ operateType.redact }}</el-link
          >
          <el-link
            type="danger"
            style="padding-left: 10px"
            @click="handleDelete(scope.$index, scope.row)"
            >{{ operateType.delete }}</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <ContactPersonDialog
      v-if="dialogFormVisible"
      ref="ContactPersonDialog"
      :customer-id.sync="customerId"
      :customer-person-id.sync="customerPersonId"
      :update-state.sync="updateState"
      :dialog-form-visible.sync="dialogFormVisible"
      @contactPersonClose="contactPersonClose"
    />
    <BasePagination
      class="pagination-component"
      :total="total"
      :current-page="filterForm.pageIndex"
      @changePage="changePage"
      @sizeChange="sizeChange"
    />
  </div>
</template>
<script>
import {
  getList,
  deleteRecord,
} from "../../../api/SysBusiness/CustomerPerson.js";
import ContactPersonDialog from "./ContactPersonDialog.vue";

export default {
  name: "CustomerPerson",
  components: { ContactPersonDialog },
  props: {
    customerPersonDto: {
      type: Array,
      default: function() {
        return [];
      },
    },
    customerId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      dialogFormVisible: false,
      updateState: false,
      personData: [],
      total: 0,
      customerPersonId: 0,
      submitLoad: false,
      customerPersonData: [],
      filterForm: {
        pageIndex: 1,
        pageSize: 10,
        idList: [],
        sysBusinessCustomerId: 0,
      },
    };
  },
  computed: {
    operateType() {
      return this.$t("ModuleSysBusiness.OperateType") || {};
    },
    customer() {
      return this.$t("Customer") || {};
    },
  },
  watch: {
    customerId: {
      handler(val, oldVal) {
        if (val) {
          this.init();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created: function() {},
  methods: {
    // 新增联系人
    addPerson() {
      this.customerPersonId = "";
      this.updateState = false;
      this.dialogFormVisible = true;
    },
    // 关闭联系人弹框
    contactPersonClose(data) {
      this.customerPersonId = "";
      this.updateState = false;
      var num = 0;
      for (let i = 0; i < this.personData.length; i++) {
        if (this.personData[i].id === data.id) {
          num = 1;
          this.personData[i] = data;
        }
      }
      if (num === 0) {
        this.personData.push(data);
      }
      this.init();
    },
    init() {
      this.submitLoad = false;
      if (
        this.customerId === null ||
        this.customerId === "" ||
        this.customerId === 0
      ) {
        if (this.personData !== null && this.personData.length !== 0) {
          var idList = [];
          for (let i = 0; i < this.personData.length; i++) {
            idList.push(this.personData[i].id);
          }

          this.filterForm.idList = idList;
        }
      }
      if (this.customerId !== null && this.customerId !== "") {
        this.filterForm.sysBusinessCustomerId = this.customerId;
      }
      getList(this.filterForm).then((res) => {
        this.customerPersonData = res.data ? res.data.dataList : [];
        this.total = res.data ? res.data.total : 0;
      });
    },
    sizeChange(val) {
      this.filterForm.pageIndex = 1;
      this.filterForm.pageSize = val;
      this.init();
    },
    // 切换页码
    changePage(page) {
      this.filterForm.pageIndex = page;
      this.init();
    },
    // 取消
    cancelModal() {
      this.$refs.personForm.resetFields();
    },
    // 编辑
    handleUpdate(index, row) {
      this.customerPersonId = row.id;
      this.dialogFormVisible = true;
      this.updateState = true;
      if (row.id === 0) {
        this.customerPersonData.splice(index, 1);
      }
    },
    // 删除联系人
    deletePerson(idList) {
      // var IdList = [];
      // for (let i = 0; i < this.personData.length; i++) {
      //   IdList.push(this.personData[i].id);
      // }
      deleteRecord({ id: idList }).then((res) => {
        if (res.code === 200) {
          this.$message.success(this.$t("ModuleSysBusiness.OperateType.operationSuccessful"));
          this.init();
        }
      });
    },
    handleDelete(index, row) {
      this.$confirm(
        this.$t("Customer.sureDeleteContact"),
        this.$t("Customer.deleteContacts"),
        {
          type: "warning",
          confirmButtonText: this.$t("ModuleSysBusiness.OperateType.confirm"),
          okType: "danger",
          center: true,
          cancelButtonText: this.$t("ModuleSysBusiness.OperateType.cancel"),
          beforeClose: (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              var idList = [];
              idList.push(row.id);
              deleteRecord({ id: idList }).then((res) => {
                if (res.code === 200) {
                  instance.confirmButtonLoading = false;
                  this.$message.success(
                    this.$t("ModuleSysBusiness.OperateType.operationSuccessful")
                  );
                  this.init();
                  done();
                }
              });
            } else {
              instance.confirmButtonLoading = false;
              done();
            }
          },
        }
      ).catch();
    },
  },
};
</script>

<!--style scoped>
 .base-pagination {
    width: 100%;
    height: 50px;
    line-height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 4px 10px 4px #e4e7f0;
    box-shadow: 0 4px 10px 4px #e4e7f0;
    background-color: #fff;
    z-index: 200;
}
.base-pagination .pagination-total {
    font-size: 12px;
    color: #656b7c;
}

.base-pagination .el-pagination, .base-pagination .is-background {
    height: 50px;
    line-height: initial;
    padding: 0;
    margin-left: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.el-pagination {
    white-space: nowrap;
    padding: 2px 5px;
    color: #303133;
    font-weight: bold;
}

.el-pagination.is-background .btn-prev:disabled, .el-pagination.is-background .btn-next:disabled {
    color: #C0C4CC;
}

.main-container .base-pagination .el-pagination .btn-prev, .main-container .base-pagination .is-background .btn-prev {
    padding: 0 12px;
}

.el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-next {
    padding: 0;
}

.el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-next, .el-pagination.is-background .el-pager li {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}

.el-pagination button:disabled {
    color: #C0C4CC;
    background-color: #FFFFFF;
    cursor: not-allowed;
}

.el-pagination .btn-prev {
    padding-right: 12px;
}

.el-pagination .btn-prev, .el-pagination .btn-next {
    background: center center no-repeat;
    background-size: 16px;
    background-color: #FFFFFF;
    cursor: pointer;
    margin: 0;
    color: #303133;
}

button, html [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
}

.el-pagination button {
    border: none;
    padding: 0 6px;
    background: transparent;
}

.el-pagination span:not([class*=suffix]), .el-pagination button {
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
</style-->
